<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 需要用到Jquery吗？？？ -->
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">管理员管理</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="/schoolSchedule.html">全校课程</a>
                            </li>
                            <li >
                                <a href="/studentResult.html">学生成绩</a>
                            </li>
                            <li >
                                <a href="/studentSchedule.html">学生课程</a>
                            </li>
                            <li>
                                <a href="/trainingPlan.html">培养方案</a>
                            </li>
                            <li>
                                <a href="/rebuild.html">重修/改修</a>
                            </li>
                            <li>
                                <a href="/">上传</a>
                            </li>
                        </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">欢迎您，老师<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="/loginout">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
            <div id="app">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">检索</h3>
                    </div>
                    <div class="panel-body form-inline">
                        <label>
                            <!--课程号:-->
                            <input type="text" class="form-control" placeholder="课程号" v-model="courseCode">
                        </label>
                        <label>
                            <input type="text" class="form-control" placeholder="课程名" v-model="courseName">
                        </label>
                        <label>
                            <input type="text" class="form-control" placeholder="教师工号" v-model="teacherId">
                        </label>
                        <label>
                            <input type="text" class="form-control" placeholder="教师名" v-model="teacherName">
                        </label>
                        <label>
                            <input type="text" class="form-control" placeholder="所在分院" v-model="college">
                        </label>
                        <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
                        <input type="button" value="检索" class="btn btn-primary" @click="search">

                    </div>
                </div>

                <table class="table table-bordered table-hover table-striped">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>课程号</th>
                        <th>课程名</th>
                        <th>教师工号</th>
                        <th>教师名</th>
                        <th>学分</th>
                        <th>时间</th>
                        <th>班级</th>
                        <th>所在分院</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
                    <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
                    <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
                    <tr v-for="item in info.list" :key="info.list.id">
                        <td data-toggle="modal" data-target="#myModal" @click="mutai(item.id)">{{ item.id }}</td>
                        <td >{{ item.courseCode }}</td>
                        <td>{{ item.courseName }}</td>
                        <td>{{ item.teacherId }}</td>
                        <td>{{ item.teacherName }}</td>
                        <td>{{ item.credit }}</td>
                        <td>{{ item.time }}</td>
                        <td>{{ item.classInformation }}</td>
                        <td>{{ item.college }}</td>
                    </tr>
                    </tbody>
                </table>
                <div class="col-md-8">
                </div>
                <div class="col-md-4">
                <nav aria-label="" style="float: right">
                    <ul class="pager">
                        <li  @click="pre"><a >Previous</a></li>
                        <li ﻿@click="next"><a >Next</a></li>
                    </ul>
                </nav>
                </div>
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    详情
                                </h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">id</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mid}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">课程代码</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mcourseCode}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">课程名</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mcourseName}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">教师号</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mteacherId}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">教师名</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mteacherName}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">职称</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mjobTitle}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">周时</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mweekTime}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">起始周</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mweek}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">学分</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mcredit}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">上课时间</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mtime}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">课程类型</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mcourseNature}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">课程性质</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mcourseCategory}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">上课班级</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mclassInformation}}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">分院</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{mcollege}}</p>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>



    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            info: 'sa',
            courseCode: "",
            courseName: "",
            teacherId: "",
            teacherName: "",
            college: "",
            pageSize : 20,
            mid:"",
            mcourseCode:"",
            mcourseName:"",
            mteacherId:"",
            mteacherName:"",
            mjobTitle:"",
            mweekTime:"",
            mweek:"",
            mcredit:"",
            mtime:"",
            mcourseNature:"",
            mcourseCategory:"",
            mclassInformation:"",
            mcollege:""
        },
        mounted() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/checklogin',
            }) .then(function (response) {
                if (response.data.code==200){
                    window.location.href="/login.html";
                }

            })
                .catch(function (error) {
                    console.log(error);
                });
            axios.get('http://localhost:8080/getSchoolSchedule', {
                params: {
                    //pageSize: this.pageSize
                    courseCode: this.courseCode,
                    courseName: this.courseName,
                    teacherId: this.teacherId,
                    teacherName: this.teacherName,
                    college: this.college,
                }
            })
                .then(response => (this.info = response.data))
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {

            next(){
                axios.get('http://localhost:8080/getSchoolSchedule', {
                    params: {
                        pageNo: this.info.nextPage,
                        courseCode: this.courseCode,
                        courseName: this.courseName,
                        teacherId: this.teacherId,
                        teacherName: this.teacherName,
                        college: this.college,
                    }
                })
                    .then(response => (this.info = response.data))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            pre(){
                axios.get('http://localhost:8080/getSchoolSchedule', {
                    params: {
                        pageNo: this.info.prePage,
                        courseCode: this.courseCode,
                        courseName: this.courseName,
                        teacherId: this.teacherId,
                        teacherName: this.teacherName,
                        college: this.college,
                    }
                })
                    .then(response => (this.info = response.data))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            search(){
                axios.get('http://localhost:8080/getSchoolSchedule', {
                    params: {
                        pageNo: this.info.prePage,
                        courseCode: this.courseCode,
                        courseName: this.courseName,
                        teacherId: this.teacherId,
                        teacherName: this.teacherName,
                        college: this.college,

                    }
                })
                    .then(response => (this.info = response.data))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            mutai(a){

                aj=this.info.list
                for(var item in aj){
                    if (aj[item].id==a){
                        this.mid=aj[item].id;
                        this.mcourseCode=aj[item].courseCode
                        this.mcourseName=aj[item].courseName
                        this.mteacherId=aj[item].teacherId
                        this.mteacherName=aj[item].teacherName
                        this.mjobTitle=aj[item].jobTitle
                        this.mweekTime=aj[item].weekTime
                        this.mweek=aj[item].startWeek+"-"+aj[item].lastWeek
                        this.mcredit=aj[item].credit
                        this.mtime=aj[item].time
                        this.mcourseNature=aj[item].courseNature
                        this.mcourseCategory=aj[item].courseCategory
                        this.mclassInformation=aj[item].classInformation
                        this.mcollege=aj[item].college

                    }
                }
            },
            add() { // 添加的方法
                // console.log('ok')
                // 分析：
                // 1. 获取到 id 和 name ,直接从 data 上面获取
                // 2. 组织出一个对象
                // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
                // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；

                // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；

                var car = {
                    id: this.id,
                    name: this.name,
                    ctime: new Date()
                }
                this.list.push(car)
                this.id = this.name = ''
            },
            del(id) { // 根据Id删除数据
                // 分析：
                // 1. 如何根据Id，找到要删除这一项的索引
                // 2. 如果找到索引了，直接调用 数组的 splice 方法

                /* this.list.some((item, i) => {
                  if (item.id == id) {
                    this.list.splice(i, 1)
                    // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
                    return true;
                  }
                }) */

                var index = this.list.findIndex(item => {
                    if(item.id == id) {
                        return true;
                    }
                })

                // console.log(index)
                this.list.splice(index, 1)
            }
        }
    });
</script>
</body>

</html>